<template>
    <div>
        <el-container class="page">
            <el-aside width="200px">
                <!-- 侧边栏 
        unique-opened：是否只保持一个子菜单的展开
        background-color：菜单的背景色
        default-active：当前激活菜单的 index
        text-color:菜单的文字颜色
        active-text-color：当前激活菜单的文字颜色
                -->
                <el-menu
                    unique-opened
                    background-color="rgb(37,45,75)"
                    default-active="1-1"
                    class="el-menu-vertical-demo"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                    router
                >
                    <el-menu-item index="/">
                        <i class="el-icon-menu"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>

                    <div v-for="item in user.menus" :key="item.id">
                        <el-submenu :index="item.id.toString()" v-if="item.children">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item
                                    :index="i.url"
                                    v-for="i in item.children"
                                    :key="i.id"
                                >{{ i.title }}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!-- 遍历菜单 -->
                        <el-menu-item v-else :index="item.url">
                            <i class="item.icon"></i>
                            <span slot="title">{{ item.title }}</span>
                        </el-menu-item>
                    </div>
                </el-menu>
            </el-aside>
            <el-container>
                <el-header>
                    <div class="headerId">
                        <span>{{ user.username }}</span>
                        <i class="el-icon-setting" @click="out" title="退出登录"></i>
                    </div>
                </el-header>
                <el-main>
                    <!-- 面包屑组件 -->
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <!-- 二级路由出口 -->
                    <router-view class="second-con"></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
    props: [],
    data() { return {} },
    computed: {
        ...mapGetters({
            user: "user"
        }),
    },
    mounted() {
    },
    methods: {
        ...mapActions({
            changeUser: "changeUser"
        }),
        //退出
        out() {
            this.changeUser({})
            this.$router.replace("/login")
        }
    },
};
</script>
<style scoped lang="less">
@import "../../less/index.less";
.el-aside {
    background: @primary;
}
.el-header {
    background: @header-color;
    span {
        color: #fff;
        line-height: 44px;
        margin-right: @margin;
    }
}
.page {
    height: 100vh;
}
/deep/.el-menu,
.el-submenu,
/deep/.el-menu-item:focus,
/deep/.el-menu-item:hover,
/deep/.el-submenu__title:focus,
/deep/ .el-submenu__title:hover {
    background: @primary !important;
}
.second-con {
    padding-top: @padding;
}
.el-icon-setting{
    cursor: pointer;
}
.headerId{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>